import { Link } from 'react-router-dom';
import { Button } from 'antd';
import { Header } from '@/components';

export default function Home() {
  const options = [
    {
      title: 'avif编码',
      path: '/avifenc',
      description: '将jpg、png、webg转成avif',
    },
    {
      title: 'avif解码',
      path: '/avifdec',
      description: '将avif转成png/jpg',
    },
  ];

  return (
    <div className="h-full w-full p-4">
      <Header back={false} title="工具" />

      <div className="flex flex-row items-center justify-center gap-4">
        {options.map(({ title, path, description }, index) => (
          <Link className="mt-4 flex w-[240px] flex-col rounded-xl bg-[#f4f4f4] px-4 py-4" key={index} to={path}>
            <span className="text-xl text-[#333]">{title}</span>
            <span className="mt-3 h-[40px] text-[16px] text-[#333]/80">{description}</span>
            <Button type="primary" className="mt-[20px]">
              go
            </Button>
          </Link>
        ))}
      </div>
    </div>
  );
}
